<!-- 页面头部 -->
<template>
  <div class="header">
    <div class="left">
      <!-- logo区 -->
      <div class="logo-warp">
        <img class="logo-img" src="~_images/logo.png" alt />

        <div class="logo-text">xxxx信息系统</div>
      </div>
      <!-- menu区 -->
      <Menu mode="horizontal" :active-name="$route.path.split('/')[1]">
        <template v-for="item of menu">
          <MenuItem
            :name="item.path"
            v-if="!item.subMenu"
            :key="item.key"
            @click.native="goTo(item.path)"
            >{{ item.name }}
          </MenuItem>
          <Submenu :name="item.order" v-if="item.subMenu" :key="item.key">
            <template slot="title">{{ item.name }}</template>
            <MenuItem
              :name="`${item.order}-${subIndex}`"
              v-for="(subItem, subIndex) of item.subMenu"
              :key="subItem.key"
              :to="subItem.path"
              >{{ subItem.name }}
            </MenuItem>
          </Submenu>
        </template>
      </Menu>
    </div>
    <div class="right">
      <!-- person区 -->
      <div class="login-info">
        <Dropdown transfer>
          <a href="javascript:void(0)">
            <Icon type="ios-person" />
          </a>
          <DropdownMenu slot="list">
            <DropdownItem>个人信息</DropdownItem>
            <DropdownItem>退出登录</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import menu from '_config/menu'

export default {
  name: 'TheHeader',

  props: {},

  data() {
    return {
      menu: menu,
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {
    goTo(path) {
      this.$router.push(path).catch(err => {}) // eslint-disable-line
    },
  },
}
</script>
